<template>
    <view v-if="show" @click="handleClose" class="popup big">
        <view
            class="container br-40 center"
            :class="[show ? 'dh1' : '', isClose ? 'dh2' : '']"
            @click.stop="() => {}"
        >
            <hj-image mode="aspectFill" :img="qrcode" width="400rpx" height="400rpx" />
        </view>
    </view>
</template>

<script setup>
/**
 * @description 优惠券二维码使用弹窗
 * 二维码内容区限制了点击不可关闭的冒泡事件
 * @author yinzhi
 * @date 2025-03-12
 * @param show {Boolean} 是否显示弹窗
 * @param qrcode {String} 二维码内容
 */
import { ref, defineComponent } from 'vue'
defineComponent({
    name: 'UsePopup'
})

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    qrcode: {
        type: String,
        default: ''
    }
})

const emit = defineEmits()

// 是否点击关闭
const isClose = ref(false)

// 关闭弹窗 主要是为了增加关闭动画加的定时器
const handleClose = () => {
    isClose.value = true
    let time = setTimeout(() => {
        emit('close')
        isClose.value = false
        time && clearTimeout(time)
    }, 300)
}
</script>

<style scoped lang="scss">
.container {
    background: $uni-bg-color;
    padding: 40rpx;
    height: auto;
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, 0%);
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 6px 0px;
    border: 1px solid #302d2d;
}
.container.dh1 {
    animation: move1 600ms;
}
@keyframes move1 {
    0% {
        top: 150%;
    }
    100% {
        top: 25%;
    }
}
.container.dh2 {
    animation: move2 600ms;
}
@keyframes move2 {
    0% {
        top: 25%;
    }
    100% {
        top: 150%;
    }
}
.popup {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba($color: #000000, $alpha: 0.3);
    z-index: 10100;
}
</style>
